<!--
 * @Date: 2025-04-02 21:38:15
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-04-24 22:25:21
 * @FilePath: /admin/vue/src/views/admin/system/user/index.vue
-->
<script setup lang="tsx">
import dayjs from 'dayjs'
import type { DataTableColumns } from 'naive-ui'
import Modal from './components/modal.vue'

const { collection, load, params, model, del, find } = useUser()
const { bool: visible, setTrue: openModal } = useBoolean()

const columns: DataTableColumns<UserModel> = [
  { type: 'selection', fixed: 'left' },
  { title: '姓名', key: 'real_name', width: 100, ellipsis: { tooltip: true }, fixed: 'left' },
  { title: '昵称', key: 'name', width: 100, ellipsis: { tooltip: true } },
  {
    title: '性别',
    key: 'sex',
    width: 80,
    filter: true,
    filterOptions: [
      { label: '男', value: '男' },
      { label: '女', value: '女' },
      { label: '保密', value: '保密' },
    ],
  },
  { title: '移动电话', key: 'mobile', width: 160 },
  { title: '邮件', key: 'email', width: 160, ellipsis: { tooltip: true } },
  {
    title: '创建时间',
    key: 'created_at',
    width: 150,
    render: (rowData: UserModel) => dayjs(rowData.created_at).format('YYYY-mm-DD HH:mm'),
  },
  {
    title: '更新时间',
    key: 'updated_at',
    width: 150,
    render: (rowData: UserModel) => dayjs(rowData.updated_at).format('YYYY-mm-DD HH:mm'),
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
    fixed: 'right',
    render(row: UserModel) {
      return (
        <n-space justify={'center'}>
          <n-button size={'small'} text type="primary" onClick={() => handleEdit(row.id)}>
            编辑
          </n-button>
          <n-popconfirm onPositiveClick={() => del(row)}>
            {{
              default: () => '确认删除',
              trigger: () => (
                <n-button size={'small'} text type="error">
                  删除
                </n-button>
              ),
            }}
          </n-popconfirm>
        </n-space>
      )
    },
  },
]

const modalType = ref<ModalType>('add')
function setModalType(type: ModalType) {
  modalType.value = type
}

const handleAdd = () => {
  openModal()
  setModalType('add')
}

const handleEdit = async (rowId: any) => {
  await find(rowId)
  setModalType('edit')
  openModal()
}

watch(
  () => params.value.key,
  (newValue) => (params.value.page = 1),
)
</script>

<template>
  <n-card class="h-full" :bordered="false">
    <n-space justify="space-between" class="mb-2">
      <n-space>
        <n-button type="primary" @click="handleAdd">
          <template #icon>
            <n-icon><icon-add /></n-icon>
          </template>
          新增
        </n-button>
      </n-space>

      <n-input type="text" v-model:value="params.key" @keyup.enter="load()">
        <template #suffix>
          <n-icon class="cursor-pointer" @click="load()">
            <icon-search />
          </n-icon>
        </template>
      </n-input>
    </n-space>

    <ex-table :columns="columns" :collection="collection" :load="load" :params="params" />
  </n-card>
  <modal v-model:visible="visible" :type="modalType" :model="model" :load="load" />
</template>
